<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新增缴费</title>
    <link rel="stylesheet" href="./plugin/jq-weui/css/weui.min.css">
    <link rel="stylesheet" href="./plugin/jq-weui/css/jquery-weui.min.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/add.css">
</head>
<body>
    <div class="box">
        <div class="flex-box">
            <div class="flex-group">
                <label>缴费单位</label>
                <input  type="text" id="unit"  placeholder="请选择缴费单位"/>
            </div>
            <div class="flex-group">
                <label>缴费户号</label>
               <input class="door-num" type="number" pattern="[0-9]*" placeholder="请输入户号"/>
               <a href="#" class="prompt open-popup" data-target="#help">如何查户号</a>
            </div>
            <div class="flex-group">
                <label>用户名称</label>
                <input  type="text" placeholder="请输入用户名"/>
            </div>
            <div class="flex-group">
                <label>用户地址</label>
                <input  type="text" placeholder="请输入用户地址"/>
            </div> 
        </div>
        <div class="flex-group money-box add-money">
            <label>缴费金额</label>
            <input  type="number" pattern="[0-9]*" placeholder="请输入缴费金额"/>
        </div>
        <a href="./success.html" class="weui-btn weui-btn_primary">立即缴费</a>
    </div>
    <div id="help" class='weui-popup__container'>
        <div class="weui-popup__overlay"></div>
        <div class="weui-popup__modal">
         <div class="help-box">
            <h3 class='help-header'>
                如何查户号
            </h3>
            <ul class="help-list">
                <li>
                  <h3>1、纸质账单</h3>
                  <p>在纸质缴费/催费通知单上查找户号。</p>
                </li>
                <li>
                  <h3>2、查看短信</h3>
                  <p>查看缴费单位发送的催缴短信，短信中包含户号信息。</p>
                </li>
                <li>
                  <h3>3、电话咨询</h3>
                  <p>拨打客户热线，凭户名和地址查询。</p>
                </li>
            </ul>
            <a href="javascript:;" class="weui-btn weui-btn_primary close-popup">关闭</a>
         </div>
        </div>
      </div>
    <script src="./plugin/jquery-2.1.4.js"></script>
    <script src="./plugin/jq-weui/js/jquery-weui.min.js"></script>
    <script>
         $("#unit").picker({
        title: "请选择缴费单位",
        cols: [
          {
            textAlign: 'center',
            values: ['长治市城镇供水集团有限公司', '长治县黎都供水有限公司', '长治县给排水中心', '沁源县自来水公司', '山西省襄垣县自来水公司']
          }
        ],
        onChange: function(p, v, dv) {
          console.log(p, v, dv);
        },
        onClose: function(p, v, d) {
          console.log("close");
        }
      });
    </script>
</body>
</html>